<script setup>
import {
  AssignmentIcon,
  ControlPlatformIcon,
  LoginIcon,
  ChartStackedIcon,
  ApplicationIcon,
  MapInformation2Icon,
  ViewInArIcon
} from 'tdesign-icons-vue-next'
import DSMap from '../../components/DSMap.vue'
</script>

<template>
  <div class="container">
    <t-layout class="container-map">
      <t-menu theme="light" :width="['100px', '58px']" :collapsed="true" expandType="popup">
        <template #logo>
          <div class="logo">
            <img src="../../assets/img/logo2.png" style="width: 40px; height: 40px" />
          </div>
        </template>

        <t-menu-group title="注册">
          <t-popup trigger="hover" placement="right">
            <template #content>
              <t-card
                title="高校基础信息注册"
                :bordered="false"
                :hover-shadow="false"
                style="max-width: 400px"
                size="small"
              >
                <template #subtitle>
                  <p style="font-size: 10px">一切高校数据的基本点</p>
                </template>
                <p style="font-size: 12px; color: rgb(151, 151, 151)">
                  高校的基础信息模块是一所高校最基本的内容，其中包含高校名称、高校专业、高校基础字典等等。
                  在高校公寓选调系统中，这些重要信息有助于系统更加合理、科学的给用户带来独特的使用体验。
                </p>
              </t-card>
            </template>
            <t-menu-item value="item2">
              <template #icon>
                <AssignmentIcon />
              </template>
              仪表盘
            </t-menu-item>
          </t-popup>
        </t-menu-group>

        <t-menu-group title="主导航">
          <t-popup trigger="hover" placement="right">
            <template #content>
              <t-card
                title="测试"
                :bordered="false"
                :hover-shadow="false"
                :style="{ width: '400px' }"
              >
                数据分析
                <template #actions>
                  <a href="javascript:void(0)">操作</a>
                </template>
              </t-card>
            </template>
            <t-menu-item value="item2">
              <template #icon>
                <ControlPlatformIcon />
              </template>
              仪表盘
            </t-menu-item>
          </t-popup>

          <t-menu-item value="item3">
            <template #icon>
              <ChartStackedIcon />
            </template>
            仪表盘
          </t-menu-item>
          <t-menu-item value="item4">
            <template #icon>
              <ApplicationIcon />
            </template>
            仪表盘
          </t-menu-item>
        </t-menu-group>

        <t-menu-group title="注册">
          <t-menu-item value="item3">
            <template #icon>
              <ChartStackedIcon />
            </template>
            仪表盘
          </t-menu-item>
        </t-menu-group>

        <t-menu-group title="注册">
          <t-menu-item value="item4">
            <template #icon>
              <ViewInArIcon />
            </template>
            仪表盘
          </t-menu-item>
        </t-menu-group>

        <!-- 
          填写后保存 -- > redis数据 -- > 下次访问根据Uid获取数据

          1.0 高校基础信息注册：
          - 高校
          - 学院
          - 专业
          - 班级
          - 数据字典基本参数
          2.1 高校宿舍信息注册：
          床位表
          房间表
          房间自定义参数表
          楼层表
          楼层自定义参数表
          楼栋表
          楼栋自定义参数表
          2.2 高校宿舍建模解析：
          3d点位表
          3d角度矢量值
          场景模型表
          主要模型表
          3d角度矢量表
          2.3 高校宿舍映射构建：
          3.1 高校平面数据注册：
          3.2 高校平面实体映射：
          4.0 高校人员信息录入：

         -->

        <template #operations>
          <t-button variant="text" shape="square">
            <template #icon><LoginIcon style="transform: rotateY(180deg)" /></template>
          </t-button>
        </template>
      </t-menu>
      <!-- 未注册管理员学校定位 -->
      <t-dialog width="1111px" :visible="true" :closeBtn="false" :footer="false" top="45px">
        <template #header> <MapInformation2Icon /> 地图定位初始化 </template>
        <template #body>
          <t-space style="width: 100%">
            <DSMap />
          </t-space>
        </template>
      </t-dialog>
    </t-layout>
  </div>
</template>

<style scoped lang="scss">
@import '../../style//common.scss';
.container {
  position: absolute;
  width: 100%;
  height: 100%;

  .container-map {
    position: reactive;
    width: 100%;
    height: 100%;

    .logo {
      @include cf;
      width: 100%;
      height: 100%;
      margin: 0;
    }
  }
}
</style>
